<template>
  <div id="main"  style="height: 560px;width: 1200px;margin-left: 0px"></div>
</template>

<script>
import * as echarts from 'echarts';
import {getTimesharing} from "@/api/stock/stock";

export default {
  name: "fenshi",
  data() {
    return {
      wsUrl: 'ws://127.0.0.1:8080/test/oneToOne',
      // ws地址
      websock: null, // ws实例,
      websockTime:'',
      websockValue:'',
      option : {
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          }
        ],
        title: [
          {
            left: 'center',
            text: 'Gradient along the y axis'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },

        xAxis: {
          type: 'category',
          data: []
        },
        grid: [
          {
            bottom: '60%'
          },
          {
            top: '60%'
          }
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: []
          }
        ]
      }
    };
  },methods:{
    initEchart(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption(this.option);
    },// 初始化weosocket
    initWebSocket() {
      if (typeof WebSocket === 'undefined')
        return console.log('您的浏览器不支持websocket')
      this.websock = new WebSocket(this.wsUrl)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() {
      let symbol = this.$route.query.symbol;
      // 连接建立之后执行send方法发送数据
      let actions = { symbol: symbol }
      this.websocketsend(JSON.stringify(actions))
    },
    websocketonerror() {
      // 连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage(e) {
      // 数据接收
      const redata = e.data
      let parse = JSON.parse(redata);
      console.log('接收的数据', parse)//d
      if(this.option.series[0].data.length==24){
        this.option.series[0].data.shift() //删除第一个元素
      }
      if(this.option.xAxis.data.length==24){
        this.option.xAxis.data.shift();
      }
      parse.forEach(it=>{
        this.option.series[0].data.push(it.p) //往图形报表中的数组添加元素
      })
      this.option.xAxis.data.push(this.getCurrentTime())

      this.initEchart();
    },
    websocketsend(Data) {
      // 数据发送
      this.websock.send(Data)
    },
    websocketclose(e) {
      // 关闭
      console.log('断开连接', e)
    },
    getCurrentTime() {
      var date = new Date();//当前时间
      var year = date.getFullYear() //返回指定日期的年份
      var month = this.repair(date.getMonth() + 1);//月
      var day = this.repair(date.getDate());//日
      var hour = this.repair(date.getHours());//时
      var minute = this.repair(date.getMinutes());//分
      var second = this.repair(date.getSeconds());//秒

      //当前时间
      var curTime = year + "-" + month + "-" + day
        + " " + hour + ":" + minute + ":" + second;
      return curTime;
    }

//补0
    ,
    repair(i){
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    }
  },created() {
   // this.timesharing();
  },mounted() {
    this.initWebSocket();//初始化websocket
    this.initEchart();
  }
}
</script>
